<template>
  <section class="todoapp">
    <Header @add="add"></Header>
    <Main @del="del" :list="list" @ischange="ischange" :type="type" @ischekall="ischekall"></Main>
    <Footer
      :list="list"
      @clear="clear"
      :type="type"
      @filterType="filterType"
    ></Footer>
  </section>
</template>

<script>
import Header from './components/header'
import Footer from './components/footer'
import Main from './components/main'
export default {
  components: { Header, Footer, Main },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('key'))||[],
      type: 'type',
    }
  },
  methods: {
    add(val) {
      this.list.unshift({ id: Math.random() * 10, name: val, isDone: false })
    },
    ischange(id) {
      this.list.forEach((x) => {
        if (x.id == id) {
          x.isDone = !x.isDone
        }
      })
    },
    clear() {
      this.list = this.list.filter((x) => {
        return !x.isDone
      })
    },
    filterType(type) {
      this.type = type
    },
    del(id) {
     this.list =  this.list.filter(x => {
        return x.id!==id
      })
    },
    ischekall(val) {
    this.list.forEach(x => {
      x.isDone=val
    })
  }
  },
 
  watch: {
    list: {
      deep: true,
      handler(val) {
        localStorage.setItem('key', JSON.stringify(val))
      }
    }
  }
}
</script>

<style></style>
